<!-- Dom模板 -->
<template>
  <div class="Forgot_1">
    <!-- Dom内容 -->
    <div class="tops">
      <p @click="nextsTo('01')" class="icon iconfont icon-zuojiantou-01"></p>
      <p>{{ $route.query.type === "01" ? "手机号注册" : "找回密码" }}</p>
      <p></p>
      <p></p>
    </div>
    <div class="fromgoup">
      <van-field
        v-model="phone"
        type="phone"
        label="+86"
        clearable
        :error-message="forgotPhoneerr"
        @input="inpChange"
        placeholder="手机号"
      />
      <van-button type="primary" block @click="nextsTo(-1)">下一步</van-button>
    </div>
    <div class="agreement" v-if="$route.query.type === '01'">
      <input ref="checkuser" type="checkbox" />
      <div class="userYes" @click="nextsTo('02')">同意《用户协议》</div>
    </div>
    <Agreement v-if="isblock" :nextsTo="nextsTo" />
  </div>
</template>
<script>
// import a from './a'; // 引入组件
import Agreement from "./agreement";
import { validation } from "../../encapsulation";
import * as API from "../../api/login";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      phone: "",
      forgotPhoneerr: "",
      // 控制用户协议弹框的显示隐藏
      isblock: false
    };
  },

  // 监听属性
  computed: {},
  // 组件挂载的地方
  components: {
    Agreement
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted(close) {
    console.log(this.$route.query.type);
    function codeLogin(Close) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 500,
        onClose: Close
      });
    }
  },
  // Vue方法定义
  methods: {
    // 点击手机号注册里边的下一步
    async nextsTo(type) {
      console.log(type);
      if (type === "01") {
        // 判断点击的是返回箭头的话直接返回
        this.$toast.loading({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
          duration: 500,
          onClose: () => {
            this.$router.go(-1);
          }
        });
      } else if (this.$route.query.type == "01") {
        // 如果传过来的type是01 那么就是手机号注册页面
        if (type === -1) {
          //  并且该回调没有形参type 那么点击的就是下一步
          // 首先判断有没有输入手机号
          if (this.phone) {
            // 手机号注册页需要勾选用户协议
            // 判断有没有勾选
            if (!this.$refs.checkuser.checked) {
              // 没有勾选提示用户勾选用户协议
              this.$toast("请勾选用户协议");
            } else {
              // 发送验证手机号请求
              let res = await API.login({
                phone: this.phone,
                // type：03 代表点击的是忘记密码的下一步
                type: "03"
              });
              if (res.code === "No") {
                // 都没有问题的话就可以执行改事件的主要内容了
                this.$toast.loading({
                  message: "加载中...",
                  forbidClick: true,
                  duration: 500,
                  onClose: () => {
                    this.$router.push({
                      path: "/backpasword",
                      query: {
                        path: this.$route.path,
                        type: this.$route.query.type,
                        phone: this.phone
                      }
                    });
                  }
                });
              } else {
                this.$toast.loading({
                  message: "加载中...",
                  forbidClick: true,
                  duration: 500,
                  onClose: () => {
                    this.forgotPhoneerr = res.msg;
                  }
                });
              }
            }
          } else {
            //没有输入手机好点击下一步提示输入手机号
            this.$toast("请输入与手机号");
          }
        } else if (type === "02") {
          // 用户协议
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            loadingType: "spinner",
            duration: 500,
            onClose: () => {
              this.isblock = true;
            }
          });
        } else if (type === "03") {
          // 用户协议里的返回键
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            loadingType: "spinner",
            duration: 500,
            onClose: () => {
              this.isblock = false;
            }
          });
        }
        console.log("1111111111");
      } else if (this.$route.query.type === "02") {
        // 如果传过来的type不是01 那就是点击的忘记密码的下一步了
        // 这时候没有什么判断条件直接执行该函数的主要内容
        console.log("下一步");
        this.$toast.loading({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
          duration: 500,
          onClose: async () => {
            // 发送验证手机号请求
            let res = await API.login({
              phone: this.phone,
              // type：02_1 代表点击的是忘记密码的下一步
              type: "02_1"
            });
            if (res.code === "Yes") {
              // 允许执行下一步
              console.log("允许执行");
              this.$router.push({
                path: "/backpasword",
                query: {
                  path: this.$route.path,
                  type: this.$route.query.type,
                  phone: this.phone
                }
              });
            } else if (res.code === "No") {
              // 不允许执行下一步
              this.forgotPhoneerr = res.msg;
            }
          }
        });
      }
    },
    // 监听手机号输入
    inpChange() {
      // 正则验证
      console.log(this.phone);
      let isphone = validation.isphone(this.phone);
      console.log(isphone);
      if (!isphone) {
        this.forgotPhoneerr = "请输入正确手机号";
      } else {
        this.forgotPhoneerr = "";
      }
      if (!this.phone) {
        this.forgotPhoneerr = "";
      }
    }
  }
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../fonts/iconfont.css");
.Forgot_1 {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  padding-top: 50px;
  z-index: 1;
}
.tops {
  width: 100%;
  height: 50px;
  background: #fff;
  box-shadow: -1px 2px 5px -5px #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
}
.tops > :nth-child(2) {
  margin-left: 20px;
}
.icon {
  font-weight: bold;
  font-size: 23px;
  margin: 0 20px;
}
.fromgoup {
  width: 80%;
  height: auto;
  margin: 40px auto;
}
.fromgoup .van-field {
  margin-bottom: 40px;
  border: 0.5px solid #ccc;
  border-radius: 5px;
}
.yes {
  width: 95%;
  margin: 10px auto;
}
.yes p {
  margin: 10px;
}
.yes p span {
  margin: 10px;
}
.agreement {
  width: 41%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.userYes {
  margin-left: 10px;
}
.userYes:hover {
  color: blue;
}
.logins {
  color: #33cc99;
  width: 45px;
}
</style>
